<template>
  <div class="container">
    <el-row :gutter="24">
      <el-col :span="5">
        <el-menu @select="handleOpen" :default-active="$route.path" class="el-menu-vertical-demo">
          <el-menu-item :index="item.path" v-for="(item,index) in routerList" :key="index">
            <i class="el-icon-postcard"></i>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="19">
        <router-view />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import contactUs from "@/router/contactUs";
export default {
  data() {
    return {
      routerList: [],
      activePath: ""
    };
  },
  created() {
    this.routerList = [];
    let childrenList = [].concat(contactUs[0].children);
    for (let item of childrenList) {
      this.routerList.push({
        path: `${contactUs[0].path}/${item.path}`,
        name: item.name
      });
    }
  },
  methods: {
    handleOpen(path) {
      this.$router.push(path);
    },
    handleClose() {}
  }
};
</script>

<style scoped lang='less'>
</style>